<template>
	<view>
		<u-navbar :is-back="false" title="店铺" :border-bottom="false" title-color="#f1f1f1" :background="navbarBackground"></u-navbar>
		<view class="main">
			<view class="search">
				<view class="input" @tap="handleNavigateTo"><u-search placeholder="请输入搜索内容" disabled :show-action="false"></u-search></view>
			</view>
			<!-- 滚动区域 -->
			<view class="scroll" id="scroll-panel">
				<view class="left">
					<scroll-view scroll-y :style="{ height: scrollHeight + 'px' }" :scroll-into-view="leftIntoView">
						<view
							class="left-item"
							v-for="(item, index) in goodsList"
							:key="index"
							:class="{ 'left-item-active': index == leftIndex }"
							:id="'left-' + index"
							:data-index="index"
							@tap="leftTap"
						>
							<text>{{ item.category_name }}</text>
						</view>
					</scroll-view>
				</view>
				<view class="right">
					<scroll-view scroll-y :style="{ height: scrollHeight + 'px' }" @scroll="mainScroll" :scroll-into-view="scrollInto" :scroll-with-animation="true">
						<view class="right-item main-item" v-for="(item, index) in goodsList" :key="index" :id="'item-' + index">
							<view class="label">
								<u-divider color="#999">{{ item.category_name }}</u-divider>
							</view>
							<view class="right-item-card" v-for="(it, ind) in item.goods" :key="ind">
								<u-image width="30vw" height="150" border-radius="10" :src="it.cover" @click="handleDetail(it.id)"></u-image>
								<view class="card-right">
									<text class="name" @click="handleDetail(it.id)">{{ it.title }}</text>
									<text class="un-price">{{ '￥' + it.origin_price }}</text>
									<view class="on-price">
										<view class="price" @click="handleDetail(it.id)">
											<text class="symbol">￥</text>
											<text>{{ it.present_price }}</text>
										</view>
										<u-icon size="40" color="#284678" name="shopping-cart" @click="handleAddCart(it.id)"></u-icon>
									</view>
								</view>
							</view>
						</view>
						<view class="fill-last" :style="{ height: fillHeight + 'px' }"></view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view @click="showPopup = true"><drag-ball :x="320" :y="550" :image="require('../../static/image/client.png')">客服</drag-ball></view>
		<!-- 客服弹窗 -->
		<u-popup v-model="showPopup" mode="center" border-radius="15">
			<view class="popup">
				<text class="popup-title">客服咨询</text>
				<text class="popup-mobile">{{ '咨询热线：' + customer.tel_number }}</text>
				<u-image width="220" height="220" :src="customer.kefu_qr"></u-image>
				<text class="popup-sub">长按试别二维码保存图片</text>
			</view>
		</u-popup>
	</view>
</template>

<script>
import dragBall from '../../components/drag-ball/drag-ball.vue';
export default {
	components: {
		dragBall
	},
	data() {
		return {
			navbarBackground: {
				backgroundImage: 'linear-gradient(90deg, rgb(27,52,92), rgb(49,84,142))'
			},
			showPopup: false,
			goodsList: [],
			topArr: [],
			scrollHeight: 0, // 滚动高度
			scrollTopSize: 0,
			leftIndex: 0,
			scrollInto: '',
			fillHeight: 0,
			customer: {}
		};
	},
	onLoad() {
		// #ifdef MP-WEIXIN
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
		this.getGoodsList();
		let that = this;
		uni.getSystemInfo({
			success: function(res) {
				that.scrollHeight = res.windowHeight - 100;
			}
		});
		// 客服信息
		this.$baseRequest('/api/Common/customer').then(res => {
			this.customer = res.data;
		});
	},
	mounted() {
		this.$nextTick(() => {
			setTimeout(() => {
				this.initScrollView().then(() => {
					this.getGoodsList();
				});
			}, 200);
		});
	},
	methods: {
		getGoodsList() {
			this.$baseRequest('/api/goods/index').then(res => {
				this.goodsList = res.data;
				this.$nextTick(() => {
					this.getElementTop();
				});
			});
		},
		handleAddCart(id) {
			this.$tkRequest('/api/ShopCar/add', {
				goods_id: id,
				share_num: 1
			}).then(res => {
				uni.showToast({
					title: '已添加到购物车',
					success: function() {
						uni.showTabBarRedDot({ index: 2 });
					}
				});
			});
		},
		handleNavigateTo(url) {
			uni.navigateTo({
				url: './search/search'
			});
		},
		// 商品详情
		handleDetail(id) {
			uni.navigateTo({
				url: `./detail/detail?id=${id}`
			});
		},
		/* 获取元素顶部信息 */
		getElementTop() {
			new Promise((resolve, reject) => {
				let view = uni.createSelectorQuery().selectAll('.main-item');
				view
					.boundingClientRect(data => {
						resolve(data);
					})
					.exec();
			}).then(res => {
				let topArr = res.map(item => {
					return item.top - this.scrollTopSize;
				});
				this.topArr = topArr;
				let last = res[res.length - 1].height;
				if (last - 20 < this.scrollHeight) {
					this.fillHeight = this.scrollHeight - last + 20;
				}
			});
		},
		/* 初始化滚动区域 */
		initScrollView() {
			return new Promise((resolve, reject) => {
				let view = uni.createSelectorQuery().select('#scroll-panel');
				view
					.boundingClientRect(res => {
						this.scrollTopSize = res.top;
						this.scrollHeight = res.height;
						this.$nextTick(() => {
							resolve();
						});
					})
					.exec();
			});
		},
		leftTap(e) {
			let index = e.currentTarget.dataset.index;
			this.scrollInto = `item-${index}`;
		},
		mainScroll(e) {
			let top = e.detail.scrollTop;
			let index = 0;
			for (let i = this.topArr.length - 1; i >= 0; i--) {
				if (top + 2 >= this.topArr[i]) {
					index = i;
					break;
				}
			}
			this.leftIndex = index < 0 ? 0 : index;
		}
	},
	computed: {
		leftIntoView() {
			return `left-${this.leftIndex > 3 ? this.leftIndex - 3 : 0}`;
		}
	}
};
</script>

<style lang="scss" scoped>
.main {
	.search {
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: $uni-spacing-col-lg $uni-spacing-row-lg;

		.input {
			flex: 1;
		}
	}

	.scroll {
		display: flex;

		.fill-last {
			height: 0;
			width: 100%;
			background: none;
		}

		.left {
			width: 25%;
			background-color: #f0f0f0;
			display: flex;
			flex-direction: column;

			.left-item {
				position: relative;
				padding: $uni-spacing-col-lg $uni-spacing-row-base;
				text-align: center;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.left-item-active {
				background-color: #fff;
				color: #284678;
			}

			.left-item-active::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 6rpx;
				height: 100%;
				background-color: #284678;
				border-radius: 10rpx;
			}
		}

		.right {
			width: 75%;

			.label {
				padding: $uni-spacing-col-lg 0;
			}

			.right-item {
				padding: 0 $uni-spacing-row-lg;
				background-color: #fff;

				.right-item-card {
					display: flex;
					align-items: center;
					padding: $uni-spacing-col-lg 0;

					.card-right {
						flex: 1;
						height: 150rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						padding-left: $uni-spacing-row-sm;
						overflow: hidden;

						.name {
							font-size: 1rem;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							font-weight: bold;
						}

						.un-price {
							font-size: 9pt;
							text-decoration: line-through;
							color: #999;
						}

						.on-price {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.price {
								color: #eab952;
								font-size: 1rem;

								.symbol {
									font-size: 10pt;
								}
							}
						}
					}
				}
			}
		}
	}
}

.popup {
	width: 80vw;
	padding: $uni-spacing-col-lg $uni-spacing-row-lg;
	background-image: url();
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #f1f1f1;

	.popup-title {
		padding: $uni-spacing-col-lg 0;
		font-family: '微软雅黑';
		letter-spacing: 4rpx;
		font-size: 12pt;
	}

	.popup-mobile {
		padding-bottom: $uni-spacing-col-lg;
		font-size: 11pt;
	}

	.popup-sub {
		padding: $uni-spacing-col-lg;
	}
}
</style>
